import React, { useRef } from 'react';
import ProForm from '@ant-design/pro-form';
import { ProFormText } from '@ant-design/pro-form';
import RECommon from '@/utils/regexp/RECommon';

const WxMini: React.FC = (props) => {
  const formRef = useRef();
  const formLayout = {
    layout: 'horizontal',
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
    title: '微信小程序配置',
    width: 500,
    autoFocusFirstInput: true,
    submitter: {
      // 配置按钮文本
      searchConfig: {
        cancelText: '取消',
        submitText: '提交',
      },
      // 配置按钮的属性
      resetButtonProps: false,
      submitButtonProps: {},
      render: (_, dom) => <div style={{ textAlign: 'center' }}>{dom}</div>,
    },
  };
  return (
    <ProForm
      {...formLayout}
      onFinish={async (values) => {
        const data = {
          channel: values.channel,
        };
        delete values.channel;
        data.config = values;
        await props.onSubmit(data);
      }}
      initialValues={props.values}
    >
      <ProFormText name="channel" hidden />
      <ProFormText
        name="app_id"
        label="APPID"
        rules={[
          {
            type: 'string',
            required: true,
            pattern: RECommon.text(0, 32, 1).reg,
            message: RECommon.text(0, 32, 1).msg,
          },
        ]}
      />
      <ProFormText
        name="secret"
        label="APPSECRET"
        rules={[
          {
            type: 'string',
            required: true,
            pattern: RECommon.text(0, 32, 1).reg,
            message: RECommon.text(0, 32, 1).msg,
          },
        ]}
      />
    </ProForm>
  );
};

export default WxMini;
